<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<link rel="stylesheet" href="animate.css">
		<style>
				body,
			html {
				padding: 0;
				margin: 0;
			}
			
			body,
			html {
				height: 100%;
				/**隐藏滚动条**/
				overflow: hidden;
			}
			
			.box {
				width: 100%;
				height: 100%;
				background-color: pink;
			}
			
			.left {
				width: 80%;
				height: 100%;
				display: inline-block;
				float: left;
				position: relative;
				padding-top: 65px;
			}
			
			.content {
				background-color: red;
				width: 95%;
				height: 85%;
				margin: 0 auto;
				position: absolute;
				top: 100px;
				left: 0;
			}
			
			.bar {
				width: 50px;
				height: 50px;
				background-color: yellow;
			}
			
			.bar-top {
				position: absolute;
				top: 15px;
				left: 75px;
			}
			
			.bar-down {
				position: absolute;
				bottom: 87px;
				left: 65px;
			}
			
			.bar-right {
				position: absolute;
				right: 293px;
				top: 5px;
			}
			
			.right {
				width: 20%;
				height: 100%;
				display: inline-block;
				background-color: blue;
				float: right;
			}
			
			@keyframes go {
				from {
					transform: translateY(0px);
				}
				40% {
					transform: translateY(700px);
					opacity: 0;
				}
				60% {
					opacity: 0;
					transform: translateY(-700px);
				}
				to {
					opacity: 1;
					transform: translateY(0px);
				}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="left">
				<div class="bar-top bar"></div>
				<div class="content">

				</div>
				<div class="bar-down bar"></div>
			</div>
			<div class="right">
				<div class="bar-right bar"></div>
				<div class="con-right"></div>
			</div>
		</div>
		<script src="jquery-1.11.1.min.js"></script>
		<script>
			$(function() {
				$('.bar-top').click(function() {
					function move() {
						var top = 0;
						var id = setInterval(frame, 1);

						function frame() {
							console.log(111);
							top += 10; // 更新参数
							$('.content').css('top', top + 'px'); // 显示帧
							if(top == 1000) {
								clearInterval(id);
								var xia = -1000;
								var el = setInterval(down, 1);

								function down() {
									xia += 10;
									$('.content').css('top', xia + 'px');
									if(xia == 100) {
										clearInterval(el);
									}
								}
							}
						}
					}
					move();

				})
				$('.bar-down').click(function() {

				})
			})
		</script>
	</body>

</html>